<script setup>
	import { nextTick, onMounted } from 'vue'
	import { followDoctorApi } from '@/services/doctor.js'
	const props = defineProps({
		list: Array,
	})
	onMounted(() => {
		console.log('render mounted...')
	})
	async function onFollowButtonClick(doctor) {
		const { code, data, message } = await followDoctorApi(doctor.id)
		// 检测接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 关注成功
		doctor.likeFlag = 1
	}
</script>
<template>
	<view class="feed-list">
		<view class="feed-list-item" v-for="item in props.list" :key="item.id">
			<view class="feed-meta">
				<image :src="item.creatorAvatar" class="doctor-avatar"></image>
				<view class="doctor-info">
					<text class="name">{{ item.creatorName }}</text>
					<text class="desc">
						{{ item.creatorHospatalName }}
						{{ item.creatorDep }}
						{{ item.creatorTitles }}</text
					>
				</view>
			</view>
			<button class="doctor-button" plain v-if="item.likeFlag === 1">
				已关注
			</button>
			<button
				class="doctor-button"
				plain
				v-else
				@click="onFollowButtonClick(item)"
			>
				+ 关注
			</button>
			<view class="feed-topic"> {{ item.title }}</view>
			<view class="feed-relation">{{ item.topic }}</view>
			<view class="feed-content">
				<view class="text">
					{{ item.content }}
				</view>
				<view class="picture">
					<image
						v-for="url in item.coverUrl"
						mode="aspectFill"
						class="uni-image"
						:src="url"
					/>
				</view>
				<view class="feed-extra">
					<text>{{ item.collectionNumber }} 收藏</text>
					<text>{{ item.commentNumber }} 评论</text>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.feed-list {
		padding: 0 30rpx;
		padding-bottom: 0;
		.feed-list-item {
			position: relative;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #ededed;
			&:last-child {
				border-bottom: none;
			}
			.feed-meta {
				height: 100rpx;
				display: flex;
				.doctor-avatar {
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
				}
				.doctor-info {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.desc {
						width: 400rpx;
						height: 40rpx;
						font-size: 26rpx;
						color: #e6e6e6;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
			.doctor-button {
				position: absolute;
				right: 0;
				top: 80rpx;
				transform: translateY(-50%);
				width: 160rpx;
				height: 60rpx;
				color: #2cb5a5;
				border: 1px solid #2cb5a5;
				border-radius: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
			}
			.feed-topic {
				line-height: 1;
				margin: 50rpx 0 24rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #121826;
			}
			.feed-relation {
				line-height: 1;
				margin: 24rpx 0 20rpx;
				font-size: 24rpx;
				color: #2cb5a5;
			}
			.feed-content {
				font-size: 28rpx;
				color: #6f6f6f;
				.text {
					@include text-overflow(3);
				}
				.picture {
					padding-top: 20rpx;
					display: flex;
					justify-content: space-between;
					.uni-image {
						width: 212rpx;
						height: 212rpx;
						border-radius: 30rpx;
					}
				}
				.feed-extra {
					padding: 20rpx 0;
					font-size: 24rpx;
					color: #c3c3c5;
					text {
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
